<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.mybtn:hover{
				background: greenyellow;
			}
			.container-fluid{
				/* width: 1200px; */
			}
			.container-fluid>.row>div{
				height: 200px;
			}
			.container-fluid>.row>div:nth-child(1){
				background: plum;
			}
			.container-fluid>.row>div:nth-child(2){
				background: palegoldenrod;
			}
			.container-fluid>.row>div:nth-child(3){
				background: palegreen;
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 
			响应式框架有哪些
			https://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design
			
			bootstrap https://v3.bootcss.com/
			
			这个你们后面会经常用到 https://www.bootcdn.cn/
			
			咱们平时写响应式官网的时候，基本不会用到bt的默认样式(太难看了),一般用到栅格布局(这个东西是所有响应式ui框架的核心)
			https://v3.bootcss.com/css/#grid
			
		-->
		
		<!-- <a href="#" class="btn btn-info btn-lg mybtn">按钮</a> -->
		
		
		<!-- 定宽的容器 -->
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-4 col-lg-4">
					1
				</div>
				<div class="col-xs-8 col-lg-4">
					2
				</div>
				<div class="col-xs-6 col-lg-4">
					3
				</div>
			</div>
		</div>
		
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>
